
<!-- 将标题放在顶部 -->
  <div class="layui-row">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">基本设置</div>
        <div class="layui-card-body">
          <form class="layui-form" lay-filter="optionForm" style="padding: 20px;">
            <div class="layui-form-item">
              <label class="layui-form-label">面板标题</label>
              <div class="layui-input-block">
                <input type="text" name="panel_title" placeholder="请输入面板标题" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">菜单标题</label>
              <div class="layui-input-block">
                <input type="text" name="menu_title" placeholder="请输入菜单标题" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">安全入口</label>
              <div class="layui-input-block">
                <input type="text" name="safe_entry" placeholder="请输入安全入口路径" autocomplete="off" class="layui-input">
                <div class="layui-form-mid layui-word-aux">例如：/safe123，留空则关闭</div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">保存设置</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

<script>
layui.use(['form', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  
  // 从后端加载设置
  function loadSettings() {
    fetch('/option')
      .then(response => response.json())
      .then(result => {
        if (result.result && result.data) {
          // 设置表单值
          form.val('optionForm', {
            panel_title: result.data.Title || '',
            menu_title: result.data.MenuTitle || '',
            safe_entry: result.data.SafeEntry || ''
          });
        } else {
          layer.msg('设置加载失败', {icon: 2});
        }
      })
      .catch(error => {
        console.error('Error:', error);
        layer.msg('请求失败', {icon: 2});
      });
  }
  
  // 页面加载时获取设置
  loadSettings();
  
  // 监听提交
  form.on('submit(save)', function(data){
    var loading = layer.load(2);
    
    // 准备提交数据
    var submitData = {
      Title: data.field.panel_title,
      MenuTitle: data.field.menu_title,
      SafeEntry: data.field.safe_entry
    };
    
    // 提交到后端
    fetch('/option', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(submitData)
    })
    .then(response => response.json())
    .then(result => {
      layer.close(loading);
      if (result.result) {
        layer.msg('设置已保存', {icon: 1});
      } else {
        layer.msg('保存失败: ' + (result.message || '未知错误'), {icon: 2});
      }
    })
    .catch(error => {
      layer.close(loading);
      console.error('Error:', error);
      layer.msg('请求失败', {icon: 2});
    });
    
    return false; // 阻止跳转
  });
});
</script>
